<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>返奖报告</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
		</script>
		<style>
			html,
			body,
			#app {
				width: 100%;
				height: 100%;
				/*overflow-x: hidden;*/
				margin-bottom: 0.3rem;
			}
			/**/
			
			.total-info {
				margin-top: 0.04rem;
				background-color: #FFFFFF;
				text-align: center;
				font-size: 0.22rem;
				line-height: 0.45rem;
			}
			/**/
			/**/
			
			table {
				font-size: 0.22rem;
				width: 100%;
				text-align: center;
				margin-top: 0.1rem;
			}
			
			table tr td {
				padding: 0.1rem 0;
				height: 0.8rem;
			}
			table,
			table,
			tbody,td div{
				text-align: center;
			}
			td span{
				display: inline-block;
				text-align: left;
				vertical-align: middle;
			}
			.bglight {
				background-color: #FFFFFF;
			}
			
			.tab-head {
				background-color: #FFFFFF;
				line-height: 0.5rem;
			}
			
			.light {
				color: #8e8a8a;
			}
			/**/
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #ff6600;
			}
			/**/
			.mui-scroll-wrapper {
		        top: 0;
		        bottom: 0;
			}
			.fixed{
				width: 100%;
				font-size: 0.2rem;
				background-color: white;
				border-top:1px solid #ccc ;
				border-bottom:1px solid #ccc ;
				position: fixed;
				top:1.15rem;
				z-index: 9999999;
			}
			.fixed span{
				display: inline-block;
				text-align: center;
				height: 0.6rem;
				line-height: 0.6rem;
			}
			.display{
				display: none;
			}
		</style>
	</head>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app" class="mui-content">
			<!--<div id="refreshContainer" class="total-scroll-wrapper">-->
				<!--<div class="mui-scroll">   (totalData.salesAmount/100).toFixed(2)-->
					<time-check :type='2' :names='names' :leftdata="(totalData.salesAmount/100).toFixed(2)" :rightdata="(totalData.giftCose/100).toFixed(2)" :actnum="actnum" :dateType="dateType" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
					<div class="flex total-info">
						<div class="flex-item textLeft">
							返奖率：{{totalData.awardRate}}
						</div>
						<div class="flex-item textRight">
							毛利：{{((totalData.grossProfit)/100).toFixed(2)}}
						</div>
					</div>
					<div class="division flex">
						<div class="line"><span></span></div>
						<div class="division-word">
							返奖率排行
							<!--出奖排名-->
						</div>
						<div class="line"><span></span></div>
					</div>
					<div :class="isFixed === true ? 'fixed' : 'display'">
						<span style="width:12%">排行</span>
						<span style="width:20%">门店名</span>
						<span style="width:21.5%" class="light" >礼品机</span>
						<span style="width:19.5%">返奖成本</span>
						<span style="width:21%">返奖率</span>
					</div>

					<table>
						<tr class="tab-head">
							<td style="width:10%">排行</td>
							<td style="width:20%">门店名</td>
							<td style="width:18%" class="light" >礼品机</td>  							<!--//class="light"-->
							<td style="width:18%">返奖成本</td>
							<td style="width:18%">返奖率</td>
						</tr>
						<tr v-show="totalData.storeReport.length !==0" v-for="(item,index) in totalData.storeReport" :key='index' :class="{bglight:index%2===1}" @click="toShop(index)">
							<td style="width:10%"><div>{{index+1}}</div></td>
							<td style="width:20%"><div><span>{{item.storeName}}</span></div></td>
							<td style="width:18%" class="light"><div><span>{{item.giftNumber !==null ? item.giftNumber+'台' : '--'}}</span></div></td>
							<td style="width:18%"><div><span>{{ item.awardCost !==null ? (item.awardCost/100).toFixed(2) : '--'}}</span></div></td>
							<td style="width:18%"><div><span>{{item.storeAwardRate !==null ?item.storeAwardRate:'--'}}</span></div></td>
						</tr>
					</table>
					<p v-show="totalData.storeReport.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
						暂无数据
					</p>
				<!--</div>-->
			<!--</div>-->
		</div>
		<!---->
		<script src="../config.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						names: {
							leftName: '总销售额',
							rightName: '礼品成本'
						},
						fromDate: '',
						toDate: '',
						pageId: '',
						actnum: 0,
						probability: '0%',
						totalData: {
							income: 0,
							prize: 0,
              storeReport: []
						},
            dateType:1,    // 0 日  1 周 2月
            isFixed:false,
						top:'1rem'
					}
				},
				created: function() {
					var vm = this;
					mui.init({
						beforeback: function() {
							var mainPage = plus.webview.currentWebview().opener()
							mainPage.close();
						}
					});
					mui.plusReady(function() {
						vm.receiveParams()
						vm.initTime()
					})
				},
				mounted:function(){
          window.addEventListener('scroll', this.handleScroll)
				},
				methods: {
					receiveParams: function() {
						var sf = plus.webview.currentWebview();
					},
          initTime: function() {
            this.date = new Date()
//            var weekday = this.date.getDay();//0:周日，1-6：周一到周六         默认时间为周
//            if(weekday === 0) weekday = 7;
//            var startTime=new Date().getTime() - (24*60*60*1000)*(weekday-1);
//            this.fromDate=new Date(startTime).format('yyyy-MM-dd')
//            this.toDate = new Date(this.date).format('yyyy-MM-dd')

//						默认时间为日
            this.fromDate=new Date(this.date).format('yyyy-MM-dd')
            this.toDate = new Date(this.date).format('yyyy-MM-dd')
          },
					loadData: function() {
            var vm = this;
						config.ajax({
							url: '/outPrize/checkAll',
							data: {
                fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
                toDate: new Date(vm.toDate).format('yyyyMMdd'),
								type:vm.dateType,
							},
							success: function(res) {
//							  console.log(JSON.stringify(res))
								if(res.result === 1) {
									vm.totalData = res.data;
								} else {
									mui.toast(res.errormsg)
								}
							}
						})
					},
					toShop: function(index) {
						var vm = this;
						mui.openWindow({
							url: 'rewordShopReport.html',
							id: 'rewordShopReport',
							styles: {
								titleNView: {
									titleText:  vm.totalData.storeReport[index].storeName,
									titleColor: "#FFFFFF",
									titleSize: "17px",
									backgroundColor: "#FF6800",
									autoBackButton: true,
									buttons: [{
										fontWeight: 'normal',
										fontSize: '18px',
										float: 'right',
										fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
										text: "\ue602",
										onclick: function() {
											var allPage = plus.webview.all()
											var nowPage = plus.webview.getWebviewById('index')
											for(var i = 0; i < allPage.length; i++) {
												if(allPage[i].getURL() !== nowPage.getURL()) {
													plus.webview.close(allPage[i]);
												}
											}
										}
									}],
									splitLine: {
										color: "#CCCCCC",
										height: "1px"
									}
								}
							},
							extras: {
								storeId: vm.totalData.storeReport[index].storeId,
								storeName: vm.totalData.storeReport[index].storeName,
								fromDate: vm.fromDate,
								toDate: vm.toDate,
								actnum: vm.actnum,
                dateType:vm.dateType
							}
						});
					},
          handleScroll:function(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(scrollTop > 160 ){
              vm.isFixed=true;
              vm.top='1.75rem'
            }else {
              vm.isFixed=false;
              vm.top='1.18rem'
            };
          }
				},
				watch: {
					fromDate: function() {
						this.loadData();
					}
				}
			})
		</script>
	</body>

</html>